<template>
  <div class="my-missions">
    <!-- 頭部 -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      title="我的任务"
    >
      <template #right>
        <router-link to="/add">
          <div class="add">
            <img src="@/assets/images/add.png" />
            <div>发任务</div>
          </div>
        </router-link>
      </template>
    </van-nav-bar>

    <!-- body -->
    <div class="tabs">
      <div class="tab-item">我接的任务</div>
      <div class="tab-item">我发的任务</div>
    </div>
    <van-tabs color="#288EF4">
      <van-tab title="我接的任务" @click="selTab='我接单的任务列表'">
        <div class="code-body">
          <div
            v-for="item in labelsBoxData"
            :key="item"
          >
            <LabelsBox
              :data="item"
              @run-parent="getChild"
            ></LabelsBox>
          </div>
        </div>
        <div class="code-px"  @click="solct">
          共查询到 {{ data?data.maxCount:'0' }}条 相关任务
          <span>{{pages.isTimeDesc == 0 ?'时间由远及近':'时间由近及远'}} <img
              src="@/assets/images/pxdown.png"
              alt=""
            /></span>
        </div>
        <van-list
          v-model="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad('我接单的任务列表')"
        >
        <div
          v-for="item in listData"
          :key="item"
        >
          <task-finish-item
            :taskData="item"
            :showType='true'
            pjType='1'
            @to-detail="toDitel"
          ></task-finish-item>
          <div class="finish-type">
            <van-button
              plain
              hairline
              type="primary"
              size="small"
              color="#333333"
              v-if="IsClose(item)"
              @click="delTask(item)"
            >取消</van-button>
            <van-button
              plain
              hairline
              type="primary"
              size="small"
              color="#333333"
              v-if="IsClose(item)"
              @click="closeTask(item)"
            >完成</van-button>
            <!-- <van-button
              plain
              hairline
              type="primary"
              size="small"
              color="#288EF4"
              @click="injoin(item)"
            >加入月报</van-button> -->
          </div>
        </div>
        </van-list>
      </van-tab>
      <!-- 我发的任务  -->
      <van-tab title="我发的任务" @click="selTab='我发布的任务列表'">
        <div class="code-body">
          <div
            v-for="item in myLabelsBoxData"
            :key="item"
          >
            <LabelsBox
              :data="item"
              @run-parent="getChild"
            ></LabelsBox>
          </div>
        </div>
        <div class="code-px"   @click="solct">
          共查询到 {{ mydata.maxCount }}条 相关任务
          <span>{{pages2.isTimeDesc == 0 ?'时间由远及近':'时间由近及远'}} <img
              src="@/assets/images/pxdown.png"
              alt=""
            /></span>
        </div>
        <van-list
          v-model="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad('我发布的任务列表')"
        >
          <div
            v-for="item in myAddTaskList"
            :key="item"
          >
            <task-finish-item
              :taskData="item"
              pjType='3'
              :showType='true'
              @to-detail="toDitel2"
            ></task-finish-item>
            <div class="finish-type">
              <van-button
                plain
                hairline
                type="primary"
                size="small"
                color="#333333"
                v-if="item.status != 1"
                @click="fbCloseTask(item)"
              >关闭任务</van-button>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="less" scoped>
.tabs{
  display: flex;
  justify-content: space-between;
  background: #fff;
  .tab-item{
    width: 50%;
    text-align: center;
    position: relative;
    height: 88px;
    line-height: 88px;
    font-size: 28px;
    &:after{
      content:"";
      display: block;
      width: 48px;
      height: 6px;
      border-radius: 3px;
      background: #288EF4;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.my-missions {
  margin-bottom: 120px;
  .add {
    display: flex;
    img {
      width: 40px;
      height: 40px;
    }
    div {
      color: #288ef4;
      margin-left: 5px;
      font-size: 28px;
    }
  }
  .search-body {
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    margin-bottom: 0.3125rem;
  }
  .code-body {
    background: #fff;
    padding: 15px 30px;
    margin-bottom: 20px;
    .task-finish {
      margin-bottom: 20px;
    }
  }
  .finish-type {
    text-align: right;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-top: 1px solid #f9f9f9;
    .van-button {
      margin-right: 10px;
      font-size: 28px;
      font-weight: 500;
      border-radius: 8px;
    }
  }
  .code-px {
    margin-left: 30px;
    text-align: left;
    padding: 26px;
    font-size: 26px;
    color: #666666;
    span {
      float: right;
      margin-right: 30px;
      color: #288ef4;
      img {
        width: 24px;
        height: 24px;
        padding-left: 5px;
      }
    }
  }
}
</style>
<script>
import {
  Button,
  Icon,
  NavBar,
  Tabs,
  Tab,
  Tabbar,
  TabbarItem,
  Toast,
  List,
  Dialog,
  Search
} from "vant";
import httpRequest from "../../util/httpRequest";
import LabelsBox from "@/components/labelsBox.vue";
import TaskFinishItem from "@/components/task/taskFinishItem.vue";
import { useRouter } from "vue-router";
import maps from "@/util/maps";

export default {
  components: {
    [List.name]: List,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Search.name]: Search,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    LabelsBox,
    TaskFinishItem
  },
  computed: {
    IsClose() {
      return item => {
        const status = item.taskAcceptList[0]
          ? item.taskAcceptList[0]["ac_status"]
          : 0;
        return status === 3 || status === 2 ? false : true;
      };
    }
  },
  data() {
    return {
      selTab:'我接单的任务列表',
      isLoad: false,
      state: {
        maxPage: 1,
        loading: false
      },
      pages: {
        currentPage: 1,
        pageSize: 10,
        platformType: 1,
        isTimeDesc: 1
      },
      state2: {
        maxPage: 1,
        loading: false
      },
      pages2: {
        currentPage: 1,
        pageSize: 10,
        platformType: 1,
        isTimeDesc: 1
      },
      data:{
        maxCount:0
      },
      baseMyAddList: [],
      baseList: [],
      myAddTaskList: [], //我发布的任务列表
      baseMyAddTaskList: [], //我发布的任务列表
      router: useRouter(),
      listData: [],
      labelsBoxData: [],
      myLabelsBoxData: [],
      value: "",
      checked: false,
      navActive: 2
    };
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    // maps.getMyMissionsTagNums().then(e => {
    //   console.log(e);
    //   // let labels = this.labelsBoxData[0].labels;
    //   // let taskTypeLabMapLabels = this.labelsBoxData[1].labels;
    //   let acceptUrgenTaskNumMapLabels = this.labelsBoxData[2].labels;
    //   let acceptImportantTaskLabels = this.labelsBoxData[3].labels;
    //   // this.getLabels(labels,'statusTaskNum')
    //   // this.getLabels(taskTypeLabMapLabels,'catTaskNum')
    //   this.getLabels(acceptUrgenTaskNumMapLabels, "acceptUrgenTaskNumMap");
    //   this.getLabels(acceptImportantTaskLabels, "acceptImportantTaskNumMap");
    // });
    this.myLabelsBoxData = [
      {
        titel: "任务状态",
        styleType: "B",
        lebType: "任务状态2",
        status: 1,
        labels: [
          {
            name: "开放中",
            id: 0
          },
          {
            name: "已关闭",
            id: 1
          }
        ]
      },
      {
        titel: "紧急程度",
        lebType: "紧急程度2",
        status: 1,
        styleType: "B",
        labels: maps["urgentLevelLabMap"]
      }
    ];
    this.labelsBoxData = [
      {
        titel: "任务状态",
        styleType: "B",
        status: 1,
        lebType: "任务状态",
        labels: maps["statusLabMap"]
      },
      {
        titel: "任务类型",
        lebType: "任务类型",
        styleType: "B",
        status: 1,
        labels: maps["taskTypeLabMap"]
      },
      {
        titel: "紧急程度",
        lebType: "紧急程度",
        styleType: "B",
        status: 1,
        labels: maps["urgentLevelLabMap"]
      },
      {
        titel: "重要程度",
        lebType: "重要程度",
        styleType: "B",
        status: 1,
        labels: maps["importLevelLabMap"]
      }
    ];
    this.init();
  },
  methods: {
    init() {
      httpRequest.post("我接单的任务列表", this.pages).then(res => {
        this.data = res["data"];
        this.listData = this.data["data"];
        this.isLoad = false;
        this.state.loading = false;
        this.pages.currentPage = this.data.currentPage;
        this.state.maxPage = this.data.maxCount / this.data.pageSize;
      });
      httpRequest.post("我发布的任务列表", this.pages).then(res => {
        this.mydata = res["data"];
        this.isLoad = false;
        this.state2.loading = false;
       this.myAddTaskList = this.mydata["data"];
        this.pages2.currentPage = this.data.currentPage;
        this.state2.maxPage = this.data.maxCount / this.data.pageSize;
      });
    },
    getLabels(labels, name) {
      for (let i = 0; i < labels.length; i++) {
        const id = labels[i].id;
        const num = maps.getTaskLabMap(id, name);
        // console.log(typeof(num))
        switch (typeof num) {
          case "object":
            for (const key in num) {
              const tag = maps.acAdoptStatusMap[key];
              if (tag == "未采纳") {
                labels[i].num =
                  labels[i].name == "已完成未采纳" ? num[key] : "";
              } else {
                labels[i].num =
                  labels[i].name == "已完成已采纳" ? num[key] : "";
              }
            }
            break;

          default:
            labels[i].num = num ? num : "";
            break;
        }
      }
    },
    getChild(data) {
      console.log("getChildData:", data);
      let pages = this.selTab == "我接单的任务列表" ? this.pages : this.pages2;
      switch (data.type) {
        case "重要程度":
          pages.taskAcceptImportant = data.id;
          break;
        case "任务类型":
          pages.taskCat = data.id;
          break;
        case "任务状态":
          pages.taskStatus = data.id;
          break;
        case "紧急程度":
          pages.taskAcceptUrgent = data.id;
          break;
        case "紧急程度2":
          pages.taskBuildUrgent = data.id;
          break;
        case "任务状态2":
          pages.taskOpenStatus = data.id;
          break;

        default:
          // this.init();
          break;
      }
       this.selTab == "我接单的任务列表" ? this.getList() : this.getMyList();
    },
    /**
     * 接单人取消接单任务
     */
    delTask(item) {
      let d = {
        taskAccpetId: item.taskAcceptList[0].id,
        taskAcceptStatus: item.taskAcceptList[0].ac_adopt_status,
        type: "del"
      };
      this.router.push({
        path: "/enough",
        query: d
      });
    },
    /**
     * 发布人关闭任务
     */
    fbCloseTask(item) {
      Dialog.confirm({
        message: "确认需要关闭当前任务？"
      }).then(() => {
        httpRequest.post("发布人关闭任务", { taskId: item.id }).then(res => {
          if(res.resultCode === '000000'){
            Toast(res.data);
            item.status = 1;
            // this.init();

          }
        });
      });
    },
    /**
     * 完成任务
     */
    closeTask(item) {
      let d = {
        taskAccpetId: item.taskAcceptList[0].id,
        taskAcceptStatus: item.taskAcceptList[0].ac_adopt_status,
        type: "close"
      };
      this.router.push({
        path: "/enough",
        query: d
      });
    },
    /**
     * 翻页
     */
    onLoad() {
      let pages = this.selTab == "我接单的任务列表" ? this.pages : this.pages2;
      let state = this.selTab == "我接单的任务列表" ? this.state : this.state2;
        console.log("onLoad:", pages, state.maxPage,this.isLoad);
      if (pages.currentPage < state.maxPage && !this.isLoad) {
        this.isLoad = true;
        pages.currentPage++;
        this.selTab == "我接单的任务列表" ? this.getList() : this.getMyList();
      } else {
        // Toast("没有新的任务了");
        state.loading = false;
      }
    },
    solct() {
      if (this.selTab == "我接单的任务列表") {
        this.pages.isTimeDesc = this.pages.isTimeDesc == 1 ? 0 : 1;
        this.pages.currentPage = 1;
        this.getList();
      }else{
          this.pages2.isTimeDesc = this.pages.isTimeDesc == 1 ? 0 : 1;
          this.pages2.currentPage = 1;
          this.getMyList();
      }
    },
    getMyList() {
      httpRequest.post("我发布的任务列表", this.pages2).then(res => {
        this.mydata = res["data"];
        this.myAddTaskList = this.mydata["data"];
        this.state2.loading =this.isLoad = false;
        this.pages2.currentPage = this.mydata.currentPage;
        this.state2.maxPage = this.mydata.maxCount / this.mydata.pageSize;
      });
    },
    getList() {
       httpRequest.post("我接单的任务列表", this.pages).then(res => {
        this.data = res["data"];
        this.listData = this.data["data"];
        this.state.loading = this.isLoad = false;
        this.pages.currentPage = this.data.currentPage;
        this.state.maxPage = this.data.maxCount / this.data.pageSize;
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    toDitel(item) {
      item.type = 1;
      this.router.push({
        path: "/del",
        query: item
      });
    },
    toDitel2(item) {
      item.type = 2;
      this.router.push({
        path: "/del",
        query: item
      });
    }
  }
};
</script>
